簡介：對于 Web 開發(fā)者，尤其是前端開發(fā)工程師，Chrome 瀏覽器開發(fā)者工具幾乎成為我們每天開發(fā)調(diào)試的必備工具。那么掌握 Chrome 開發(fā)者工具會讓我們更加全面、高效地進行頁面調(diào)試和開發(fā)。本教程手把手教你全面的掌握 Chrome 開發(fā)者工具，讓你在頁面開發(fā)的過程中事半功倍！
第1章 課程介紹
介紹課程大綱，快速瀏覽Chrome DevTools開發(fā)者工具的基本功能，以及如何使用快捷打開Chrome瀏覽器開發(fā)者工具
第2章 使用 Elements 調(diào)試 DOM
本章介紹了如何使用元素面板來查看、編輯和調(diào)試HTML和DOM，學(xué)完本章你講基本掌握HTML的調(diào)試方法
第3章 調(diào)試樣式及 CSS
本章講述了如何調(diào)試頁面樣式，你將在本章掌握開發(fā)網(wǎng)頁樣式中常用的的基本方法
第4章 使用 Console 和 Sources 調(diào)試 JavaScript
本章是課程最核心內(nèi)容之一，你將掌握調(diào)試頁面JavaScript腳本最常用的方法，包括調(diào)試Log，斷點調(diào)試，在源代碼中調(diào)試等等。學(xué)完本章內(nèi)容將輔助你更快速地在日常開發(fā)工作中調(diào)試腳本，讓你事半功倍
第5章 調(diào)試網(wǎng)絡(luò)
本章也是課程核心內(nèi)容之一，使用Network面板將讓你非常容易的對頁面請求進行抓包，分析以及做性能優(yōu)化
第6章 客戶端存儲 Application 面板
本章介紹如何調(diào)試客戶端存儲，包括學(xué)會如何對Cookie，LocalStorage等調(diào)試
第7章 調(diào)試移動端、H5 頁面及遠程調(diào)試
本章介紹使用Chrome開發(fā)這工具針對移動端瀏覽器進行頁面的調(diào)試
第8章 在 DevTools 中集成 React 和 Vue 插件
本章介紹如何安裝React和Vue插件，結(jié)合現(xiàn)代流程框架的插件調(diào)試會上你更容易的針對構(gòu)建前的組件及狀態(tài)進行跟蹤